<template>
<pullRefresh ref="pullresh" :fromData="from" :getDataList="dataAPI"  @getdata="getlist">
            <div class="search">
      <el-input v-model="from.name" class="w-50 m-2" placeholder="请输入客户名称">
        <template #prefix>
          <el-icon><ElIcon-Search /></el-icon>
        </template>
      </el-input>
      <div class="search-text" @click="search">
         <span>搜索</span>
      </div>
   </div>
      <div class="content">

    <div class="content-box">
          <clientCard class="card" :data ="item" v-for="(item,index) in list" :key="index"></clientCard>
    </div>
      </div>
</pullRefresh>

</template>

<script>
import clientCard from '../components/clientCard.vue'
import pullRefresh from '../components/pullRefresh.vue'
export default {
   data(){
       return{
          input4:'',
          list:[],
          from:{
            name:''
          },
          dataAPI:this.$API.clientM.customer.infoList
       }
   },
components:{
   clientCard,
   pullRefresh
},
methods:{
   search(){
      this.from = {...this.from}
      this.list = []
      this.$refs.pullresh.reset()
   },
   getlist(data){
      console.log(data)
      this.list =  [...this.list,...data]
   }
}
}
</script>

<style scoped>
/* .top{
   margin-top: 50px;
} */
.content{
   /* width: 100vw; */
   /* height: 100vh; */
   padding: 0 1.6rem;
   background-color: #F7F7F7;
}
.search{
   /* margin-top: 80px; */
    width: 100%;
    height: 6.25rem;
    background-color: var(--el-color-bac);
    padding: 1.6rem;
    display: flex;
}
.search-text{
   width: 5.5rem;
   height: 100%;
   margin-left: 1.6rem;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 1.4rem;
font-family: Source Han Sans SC-Regular, Source Han Sans SC;
font-weight: 400;
color: var(--el-color-primary);
}
.card{
   margin-top: 2rem;
}
.m3{
   margin-top: 1.6rem;
}
/deep/.el-input__wrapper{
   border-radius:50px !important;
}
</style>